<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  const action = reactive({

  })
  onMounted(()=>{

  })
</script>
<template>
  <div class="content">
    <div class="ruleBack">
      <div class="title">百发百中</div>
      <ul>
        <li>（1）百发百中为全服排行榜形式发起活动，其中分为【日榜】【周榜】。</li>
        <li>（2）在活动期间内根据在【森林狩猎】猜中局数进行排名，每日每周根据排行名次及对应的奖励自动发放</li>
        <li>（3）日榜更新时间：每日0点更新排名并发放奖励</li>
        <li>（4）周榜更新时间：每周一0点更新排名并发放奖励</li>
      </ul>
      <div class="title">动物限定</div>
      <ul>
        <li>（1）动物限定为个人累计局数形式发起活动，其中包含7种动物。</li>
        <li>（2）在活动期间，根据每个动物猜中的局数进行累计，达到累计局数后可领取该动物后对应的奖励。</li>
        <li>（3）不同样式的动物猜中居数不可叠加，每个动物对应的奖励每个ID仅可参与1次、领取1次。</li>
      </ul>
      <ul>
        <li>1、对于任何违规手段或影响公共性的行为，经查证属实，官方有权终止向违规账号提供服务，回收账号并清空账号中的非法虚拟产品；情节严重者平台有权追究相关法律责任。</li>
<<<<<<< Updated upstream
        <li>2、本活动与苹果公司无关，最终解释权归本派对所有。</li>
=======
        <li>2、本活动与苹果公司无关，最终解释权归CC星球所有。</li>
>>>>>>> Stashed changes
      </ul>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .content {
    width: 100vw;
    height: 100vh;
    padding: 16px;
    box-sizing: border-box;
    background: #002C0D;
    .ruleBack {
      padding: 10px;
      background: #fff;
      border-radius: 16px;
      border: 1px solid #fff;
      box-sizing: border-box;
      .title {
        width: 100%;
        height: 24px;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        background: #026447;
        border-radius: 12px;
      }
      ul {
        margin: 10px 0 20px;
        li {
          color: #000;
          font-weight: 400;
          font-size: 12px;
          line-height: 22px;
        }
      }
    }
  }
</style>